<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Find The Key - Arcade Game</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/normalize.css" rel="stylesheet" type="text/css">
    <link href='https://fonts.googleapis.com/css?family=Istok+Web:400,400italic|Sigmar+One' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
    <div class="main">
    <header>
    <h1>Find The Key - Arcade Game</h1>
    <h2>Game for Udacity Front-End Nanodegree</h2>
    </header>

    <div class="menu">
            <div class="menuitem"><a href="" onclick="return false;" id="play">Play</a></div>

            <div class="menuitem"><a href="" onclick="return false;"  id="show" >show control buttons</a></div>

            <div id="canvas" class="inline1"></div>

            <div class="inline2" oncontextmenu="return false">
                <div><a href="" onclick="return false;" class="btn" id="up">UP</a></div>
            <div>
                <a href="" onclick="return false;" class="btn" id="left">LEFT</a>
                <a href="" onclick="return false;" class="btn" id="space">SPACE</a>
                <a href="" onclick="return false;" class="btn" id="right">RIGHT</a>
            </div>
            <div><a href="" onclick="return false;" class="btn" id="down">DOWN</a></div>
            </div>

            <div class="menuitem"><a href="" onclick="return false;"  id="instruc" >Instructions</a></div>
            <div id="instrucList">
                <ul>

                    <li><img src="images/Key2.png" alt="star marker" class="pic">Find a key to your home and bring it back!</li>
                    <li>Follow the star marker.<img src="images/Selector2.png" alt="star marker" class="pic"></li>
                    <li><img src="images/enemy-bug2.png" alt="star marker" class="pic">Avoid the bugs!</li>
                    <li>Use arrow keys to navigate...<img src="images/Navigation keys.png" alt="star marker" class="pic"></li>
                    <li>... or press "show control buttons" after you press PLAY.</li>
                    <li>Press <kbd>SPACE</kbd> to pause the game.</li>

                </ul>
            </div>
    </div>

    <script src="js/resources.js"></script>
    <script src="js/app.js"></script>
    <script src="js/engine.js"></script>

    <footer>
        <a href="https://github.com/TheFullResolution/FrontEnd-NanoDeegree-03_Classic_Arcade_Game" target="_blank">
            <img src="images/git_logo.png" alt="GitHub Logo" class="social-icon"></a>
    </footer>
    </div>
</body>
</html>
